<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine or request Chrome Frame -->
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Use title if it's in the page YAML frontmatter -->
    <title>欢迎使用数据库数据字典生成工具</title>

    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />

    <link href="stylesheets/normalize.css" rel="stylesheet" type="text/css" />
    <link href="stylesheets/all.css" rel="stylesheet" type="text/css" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script src="javascripts/modernizr.js" type="text/javascript"></script>
  </head>
  <style type="text/css">
       .columns input{
            width: 50%;
            float: left;
            border-radius: 10px;
       } 
       .columns p{
            float: left;
            padding-top: 5px;
            width: 100px;
       } 
       .message-error {
            outline: 0;
            border: 1px solid red !important;
            box-shadow: 0px 0px 10px 0px red !important;
        }

        .error_msg{
          float: left;
          margin-top: 10px;
          margin-left: 10px;
          color: red;
        }
  </style>

  <body class="index">
    

    <div id="wrapper" style="text-align:center;">
        <div class="hero">
            <div class="row">
                <div class="large-12 columns">
                    <h1><span>数据库数据字典生成工具</span></h1>
                </div>
            </div>
        </div>
        <!-- <div class="row">
            <div class="large-12 columns">
                <h2>Welcome to XAMPP for Windows 5.6.20</h2>
            </div>
        </div> -->
        <form method="post" action="db.php" id="dbform">
          <div class="row" style="margin-left: 33%;">
              <div class="large-12 columns">
                  <p>IP地址：</p><input type="text" name="IPaddress" id="IPaddress" placeholder="请输入IP地址">
                  <span id="error_msg" class="error_msg"></span>
              </div>
              <div class="large-12 columns">
                  <p>用户名：</p><input type="text" name="username" id="username" placeholder="请输入用户名">
                  <span id="error_msg" class="error_msg"></span>
              </div>
              <div class="large-12 columns">
                  <p>密码：</p><input type="password" name="password" id="password" placeholder="请输入密码">
                  <span id="error_msg" class="error_msg"></span>
              </div>
              <div class="large-12 columns">
                  <p>端口：</p><input type="text" name="port" id="port" placeholder="请输入端口">
                  <span id="error_msg" class="error_msg"></span>
              </div>
              <div class="large-12 columns">
                  <p>数据库名称：</p><input type="text" name="DBname" id="DBname" placeholder="请输入数据库名称">
                  <span id="error_msg" class="error_msg"></span>
              </div>
          </div>
          <div class="row">
              <div class="large-12 columns">
                  <button id="submit">提交</button>
              </div>
          </div>
        </form>
    </div>

    <!-- JS Libraries -->
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
      $(function(){ 
      　　$("#submit").click(function(e){
              // e.preventDefault();
              var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
              
      　　　　var IPaddress = $('#IPaddress').val();
              var username = $('#username').val();
              var password = $('#password').val();
              var DBname = $('#DBname').val();
              var port = $('#port').val();
              $('#dbform').removeClass('message-error');
              $('.error_msg').html('');
              if(IPaddress == '' || IPaddress == null){
                error_focus($('#IPaddress'),'请输入IP地址');
                return false;
              } else if(IPaddress.match(exp) == null){
                error_focus($('#IPaddress'),'请输入正确的IP地址');
                return false;
              } else if(username == '' || username == null){
                error_focus($('#username'),'请输入用户名');
                return false;
              } else if(port == '' || port == null){
                error_focus($('#port'),'请输入端口号');
                return false;
              } else if(DBname == '' || DBname == null){
                error_focus($('#DBname'),'请输入数据库名称');
                return false;
              } else {
                console.log(456789);
                $('#dbform').submit();
              }

      　　}); 
          function error_focus(that,msg){
            $(that).focus();
            $(that).next().html(msg);
          }
      }); 
    </script>
  </body>
</html>